<extend name="Base/common"/>

<block name="head"></block>
<block name="body">
    <script type="text/javascript">
        var iurl = "{:U('Home/Index/index','','')}";

    </script>
    <script type="text/javascript">
        $(".navbar-nav li").eq(0).addClass("active");
    </script>
    <div id="about" class="container about" style="background:url(__ROOT__{$bg['pic']|get_cover='path'}) center">
        <div class="logo_content"> 
            <div class="row">
               <volist name="logos" id="dlogo">
                    <div class="col-xs-6"><img src="__ROOT__{$dlogo['image']|get_cover='path'}"/>
                        <div class="about_title">{$dlogo['title']}</div>
                    </div>
                </volist>
            </div>
        </div>
        <div class="about_text center-block">
            <ul>               
                <volist name='list2' id="lists">
                    <li>{$lists}</li>
                </volist>
            </ul> 
        </div>
    </div>
<div id="banner" class="container banner">
<!-- Swiper -->
    <div class="swiper-container swiper0">
        <div class="swiper-wrapper">
            <volist name="advs" id="data" key="k">
                <div class="gallery swiper-slide">
                    <a href="{$data.url}">
                        <img src="__ROOT__{$data['pic']|get_cover='path'}" alt="">
                    </a>
                </div>
            </volist>
        </div>
                    <div class="swiper-button-next swiper-next0"></div>
                    <div class="swiper-button-prev swiper-prev0"></div>
    </div>


<!-- Swiper end-->
</div>
    <div id="teach" class="container teach">
        <div class="row">          
            <div class="col-md-5 bg_img1">
                <a href="{$chatsf['link']}"> <img src="__ROOT__{$chatsf['image']|get_cover='path'}"><a>
                <div class="teach_text">
                    <h2>{$chatsf['title']}</h2>
                       <p>{$chatsf['content']}</p
                </div>               
                </div>
            </div>

            <div class="col-md-7">
                <volist name="chats" id="data">                   
                    <div class="col-md-6 teach_block"><a href="{$data['link']}" class="teach_con pric_con">
                            <img src="__ROOT__{$data['image']|get_cover='path'}" class="blur active"/>
                            <div class="priceCap osLight"><span>{$data['title']}</span></div>
                            <h3>{$data['content']}</h3>
                             <font>詳情</font>
                        </a>
                             
                    </div>
                </volist>
            </div>
        </div>
    </div>

    <div id="chain" class="bg-light-grey">
        <div class="container chain">
            <div class="title">愛樂連鎖</div>    
            <div class="row">
                <volist name="store" id="data">
                    <div class="col-xs-6 chain_block pric_con">
                        <a data-id='{$data["id"]}' href="#" data-toggle="modal" data-target="#myModal"  class="ajax">
                            <div class="idvalue" style="display:none;" >{$data['id']}</div>
                            <img src=" __ROOT__{$data['images']|get_cover='path'}" class="blur active"/>
                            <div class="priceCap osLight"><span>{$data['title']}</span></div>
                            <h3>{$data['name']}</h3>
                            <font style="right:10px">詳情</font>
                        </a>
                    </div>
                </volist>
            </div>
        </div>
    </div>  


    
    <!-- Modal -->
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" >
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title text-center" id="myModalLabel">{$data['name']}</h4>
                </div>
                <div class="modal-body chain_content">
                        <div id="myCarousel" class="carousel slide">
                         <div class="carousel-inner">

                         </div>
                            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            </a>
                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            </a>
                       </div>
                    <p class="detail" >{$data['content']}</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal --> 
  
    <block name="footer"></block>
    
    <block name='script'>
        <script src="__PUBLIC__/Index/js/main.js" type="text/javascript"></script>  
        <script>
       $(function(){
       $('.ajax').click(function(){
        var id = $(this).attr("data-id");
        $.post("{:U('Index/getdetail')}",{id:id},function(data){
             $('.modal-title').html(data.name);            
             $('.detail').html(data.content);
             var path ="";
             for(var i=0;i<data.path.length;i++)
             {
               path+='<div class="item"><img src="__ROOT__'+data.path[i]+'">  </div>'; 
             }
             $('.carousel-inner').html(path);
             $(".item").eq(0).addClass("active");
        })    
           
       });   
       $(".pric_con").eq(2).css("right","-300px")
       });     
         
       </script>   
        
    </block>
</block>